const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const SRC = path.resolve(__dirname, 'src');
//将样式抽离到css文件中
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
//生成环境下，webpack默认采用uglifyjs-webpack-plugin插件压缩js代码
//此处采用webpack-parallel-uglify-plugin,因为它是多线程的
const WebpackParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');


module.exports = merge(common, {
    mode: 'production',
    module:{
        relues:[
            {
				test:/\.scss$/,
				use:[MiniCssExtractPlugin.loader,'css-loader',{
                    loader:'sass-loader',
                    options:{
                        //支持基于缩写的语法
                        sassOptions: {
                            indentedSyntax: true
                        }
                    }
                }],
                exclude: /node_modules/,
                include: SRC
            },
            {
                test: /\.less/,
                use: [MiniCssExtractPlugin.loader, 'css-loader',{
                    loader:'less-loader',
                    options:{
                        javascriptEnabled:true
                    }
                }],
                exclude: /node_modules/,
                include: SRC
            },
            {
                //解析字体或图片
                test:/\.(png|jpe?g|gif|svg)$/i
                ,use:[
                    {   
                        //url-loader内部封装了file-loader，不依赖file-loader
                        //生产环境用url-loader,开发环境用file-loader
                        loader:'url-loader', 
                        options:{
                            publicPath: path.join(__dirname,'assets/img'),
                            limit: 200 * 1024, //小于200kb时转为base64
                            name:'[name].[ext]'
                        }
                    }
                ]
            },
            {   //解析字体
                test:/\.(woff|woff2|eot|ttf|otf)$/i,
                use:[{   
                    loader:'file-loader', 
                    options:{
                        limit: 200 * 1024 //小于200kb时转为base64
                    }
                }]
            }
        ]
    },
    plugins:[
        //抽离css
        //将js中的css分离，以css文件形式存储
        new MiniCssExtractPlugin({
            filename:'[name].[contenthash:8].css',
            chunkFilename: 'chunk.[name].[contenthash:8].css'
        }),
        //https://github.com/jantimon/html-webpack-plugin#options
        new HtmlWebpackPlugin({
            title:'app template',
            filename:'index.html',//默认就是index.html,filename所在位置：output.path
            template:path.resolve(__dirname,'./src/assets/temp.html'),
            publicPath:'./public/',
            //https://blog.csdn.net/lqlqlq007/article/details/84103859
            minify:{
                //折叠空白
                collapseWhitespace: true,
                //移除注解
                removeComments: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true,
                minifyCSS:true,//是否压缩html里的css（使用clean-css进行的压缩） 默认值false
                minifyJS: true,//是否压缩html里的js（使用uglify-js进行的压缩）
            },
            chunks:['main'],//这里指定的entry.main这个键
        }),
        //压缩js
        //https://blog.csdn.net/hbiao68/article/details/104282547
        new WebpackParallelUglifyPlugin({
            uglifyJS: {
                output: {
                    beautify: false, //不需要格式化
                    comments: false //不保留注释
                },
                compress: {
                    warnings: false, // 在UglifyJs删除没有用到的代码时不输出警告
                    drop_console: true, // 删除所有的 `console` 语句，可以兼容ie浏览器
                    collapse_vars: true, // 内嵌定义了但是只用到一次的变量
                    reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
                }
            },
            include:/node_modules/,
            exclude:SRC
        }),
        //压缩css
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            //依赖cssnano处理器
            cssProcessor: require('cssnano')
        })
    ],
    optimization: {
        //tree shaking
        //https://webpack.docschina.org/guides/tree-shaking/#add-a-utility
        //需要配合package.json中副作用"sideEffects"
        //"sideEffects":["*.css"] ==》表示.css文件在import导入时是有副作用的，不能删除export导出的代码
        usedExports: true
    }
});